<template>
    <section class="login_message">
        <input type="number" maxlength="6" placeholder="获取验证码" v-model="phoneCode" @change="setPhone">
        <button class="code-btn" :class="recode!==60?'disabled-btn':''" @click="getPhoneCode" :disabled="recode!==60">{{recode==60?'点击获取':`重新获取(${recode})`}}</button>
    </section>
</template>
<script>
import {Toast} from 'mint-ui'
import {SendMsg} from '../api'
export default {
    name:'phoneCode',
    props:["phone","type"],
    data() {
        return {
            phoneCode:'',
            recode:60
        }
    },
    methods:{
        getPhoneCode(){
            if(!/^1[3-9]\d{9}$/.test(this.phone)){
              Toast('手机号码格式错误')
              return;
            }
            let timer = setInterval(()=>{
                this.recode -= 1;
                console.log(this.recode);
                if(this.recode == 0){
                    clearInterval(timer);
                    this.recode = 60;
                }
            },1000);
            const data = {
                phone:this.phone,
                type:this.type
            }
            SendMsg(data).then(res=>{
                Toast(res.msg);
            })
        },
        setPhone(){
            this.$emit('setPhone',this.phoneCode);
        }
    }
}
</script>
<style scoped>
        .code-btn{
        position: absolute;
        width: 6rem;
        right: 3rem;
        top: 1rem;
        color: #F0463C;
        background: none;
        border: none;
        font-size: 1rem;
        line-height: 3rem;
        font-weight: bolder;
        text-align: right;
    }
    .code-btn:focus{
        outline: none;
    }
    .disabled-btn{
        color: #ccc;
    }
</style>